<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >员工办理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/mine/attendance' }">打卡</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row class="margintop20">
            <el-col>
                   <el-button type="warning" @click="Sign" size="small">点击签到</el-button>
            </el-col>
            <el-col v-if="userlist">
            <el-table
            stripe
            :data="userlist"
            style="width:100%"
            class="tableinfo margintop20"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
               <el-table-column label="工号" type="index"></el-table-column>
               <el-table-column label="名字" prop="username"></el-table-column>
               <el-table-column label="电话" prop="mobile"></el-table-column>
                <el-table-column label="签到时间" prop="times">
                   <template slot-scope="scope">
                       <span v-if="new Date(scope.row.times) > time"> {{scope.row.times | timeFormat('HH:mm')}}</span>
                        <span v-else>尚未签到</span>
                   </template>
                </el-table-column>
                <el-table-column label="考勤">
                     <template slot-scope="scope">
                        <el-switch
                        disabled
                        style="display: block"
                        v-model="scope.row.show"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="正常"
                        inactive-text="迟到">
                        </el-switch>
                     </template>
                </el-table-column>
                <el-table-column label="职位" sortable prop="roleid">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.roleid | colorname">{{scope.row.roleid | rolename}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {user,sign} from "@/api"

export default {
    mounted(){
        user()
        .then(res=>{
            this.userlist = res.result
            console.userlist
        })
        this.time = new Date()
        this.time.setTime(this.time.getTime() - 3600*1000*24)
        console.log(this.time)
    },
   data(){
       return {
            userlist:[],
            form:{},
            time:null,
            value2:false
       }
   },
   methods:{
      Sign(){
          sign({})
          .then(res=>{
              if(res.type){
                   user()
                    .then(res=>{
                        this.userlist = res.result
                    })
              }
          })
      }
   }
}
</script>

<style lang="scss" scoped>
::v-deep .cell{
    font-size: 10px !important;
}
::v-deep .el-button{
    font-size: 10px !important;
}
</style>